$(function () {

    // 定义全局变量，保存参数对象
    var q = {
        pagenum: 1,
        pagesize: 5,
    }
    // 渲染分页按钮的函数
    function renderPage(total) {
        layui.laypage.render({
            elem: 'pageBox', // 存放按钮的容器的id，没有#
            count: total, // 数据的总数
            limit: q.pagesize, // 每页显示的条数
            curr: q.pagenum, // 当前是第几页
            // 自定义页码按钮的排版
            layout: ['page', 'next', 'prev', 'count', 'limit', 'skip'],
            limits: [5, 7, 9, 10, 12], // 每页显示条数的选项
            // 1) 当第1次渲染分页按钮是，jump回调函数就会被调用一次
            // 2）当切换分页时，jump回调函数就会被执行
            jump: function (obj, first) {
                // console.log(obj, first);
                // obj，分页的配置对象（obj.limit，obj.curr 当前单击的页码）
                // first,(true和undefined)
                // 当单击页码按钮时，才去调用函数，获取文章数据
                if (first !== true) {
                    // 获取当前的最新页码，更改查询参数q，调用函数重新获取文章数据
                    q.pagenum = obj.curr
                    // 获取当前最新的每页的条数，更改查询参数q，调用函数重新获取文章数据
                    q.pagesize = obj.limit
                    // 获取友情链接的数据函数
                    getLinkList()
                }
            }
        })
    }
    // 获取友情链接的数据函数
    getLinkList()
    function getLinkList() {
        $.ajax({
            url: '/admin/links',
            data: q,
            success(res) {
                if (res.status === 1) {
                    return layui.layer.msg(res.message, { icon: 5 })
                }
                // console.log(res);
                //渲染数据到页面(模板引擎)
                var htmlStr = template('tpl-blogroll', res)
                // console.log(htmlStr);
                $('tbody').html(htmlStr)

                // 渲染分页按钮！
                renderPage(res.total)
            }
        })
    }
    // --------------------------------------------
    // 定义全局变量，保存添加的友情分类模态框的索引
    var indexAdd
    // 单击'添加链接'跳出模态框
    $('#add-link').click(() => {
        indexAdd = layui.layer.open({
            type: 1, //页面层
            title: '添加友情链接',
            area: ['500px', '410px'],
            content: $('#add-form-tpl').html()
        });
    })
    // 自定义校验密码的规则
    // layui.form.verify({
    //     // 规则名称: 规则的定义
    //     url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"]

    // })
    // 单击'上传图片'弹出文件选择框
    $('body').on('click', '#urlIcon', function () {
        // 触发文件选择框的click事件
        $('#linkFile').click()
    })
    let file = ''
    // 用户选择了新文件，则上传图片显示
    $('body').on('change', '#linkFile', function () {
        var fileList = this.files
        // 判断用户是否选择了文件
        if (fileList.length <= 0) {
            return layui.layer.msg('请选择文件', { icon: 5 })
        }
        //获取被选中的文件
        file = fileList[0]
        // console.log(file);
        var objectURL = URL.createObjectURL(file);
        console.log(objectURL);
        //预览  使用固有属性prop
        $('#preIcon').prop('src', objectURL)
    })
    // 当用户点击'重置'则会清空表单数据
    $('body').on('click','#btnRest',function(){
        $('#preIcon').attr('src','')
    })
    // 完成添加链接的功能(老一套)
    // 通过事件委托给表单注册submit事件
    $('body').on('submit', '#add-form', function (e) {
        e.preventDefault()
        // var data=$(this).serialize()
        // console.log(data);
        // 请求参数 （请求参数必须使用 FormData）
        var fd = new FormData(this)
        // fd.forEach((value,item)=>{
        //     console.log(value);
        // })
        // 使用ajax发送请求
        $.ajax({
            method: 'post',
            url: '/admin/links',
            data: fd,
            contentType: false,
            processData: false,
            success(res) {
                if (res.status === 1) {
                    return layui.layer.msg(res.message, { icon: 5 })
                }
                // console.log(res);
                layui.layer.msg(res.message, { icon: 6 })
                layui.layer.close(indexAdd);
                // 渲染页面
                getLinkList()
            }
        })
    })
    // --------------------------------------------
    // 删除功能(事件委托)
    $('tbody').on('click', '.delete', function () {
        // 单击删除按钮时，统计删除按钮的数量，并保存
        var len = $('.delete').length;

        var id = $(this).attr('data-id')
        // console.log(id);
        layer.confirm('你确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            $.ajax({
                method: 'delete',
                url: '/admin/links/' + id,
                success(res) {
                    if (res.status === 1) {
                        return layui.layer.msg(res.message, { icon: 5 })
                    }
                    layui.layer.msg(res.message, { icon: 6 })

                    // 删除完成之后。判断之前保存的按钮数量
                    if (len === 1) {
                        // if (q.pagenum > 1) {
                        //     q.pagenum--
                        // }
                        // 短路运算
                        q.pagenum > 1 && q.pagenum--
                    }
                    getLinkList()
                }
            })
            layer.close(index);
        });

    })
    // --------------------------------------------
    // 编辑功能(事件委托)
    var indexEdit
    var id
    $('tbody').on('click', '.edit', function () {
        // console.log(id);
        indexEdit = layui.layer.open({
            type: 1, //页面层
            title: '编辑友情链接',
            area: ['500px', '410px'],
            content: $('#edit-form-tpl').html()
        });

        id = $(this).attr('data-id')
        getUrl(id)
    })

    function getUrl(id) {
        // 获取表单内容
        $.ajax({
            url: '/admin/links/' + id,
            success(res) {
                // console.log(res);
                if (res.status === 1) {
                    return layui.layer.msg(res.message, { icon: 5 })
                }
                layui.form.val('editForm', res.data)
                // console.log(res.data);
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
            }
        });
    }
    // 提交按钮实现
    // 点击'提交'重新渲染页面
    $('body').on('submit', '#edit-form', function (e) {
        e.preventDefault()
        var fd = new FormData(this)
        console.log(file);
        // fd.append('linkicon', file)
        if(file){
            fd.append('linkicon', file)
        }else{
            return layui.layer.msg('请选择文件',{icon:5})
        }

        // console.log(id);
        $.ajax({
            method: 'put',
            url: '/admin/links/' + id,
            data: fd,
            contentType: false,
            processData: false,
            success(res) {
                if (res.status === 1) {
                    return layui.layer.msg(res.message, { icon: 5 })
                }
                layui.layer.msg(res.message, { icon: 6 })
                console.log(res);
                layui.layer.close(indexEdit);
                getLinkList()
            }
        })
    })
    // // 点击'重置按钮'实现功能
    $('body').on('click', '#btnReset', function (e) {
        e.preventDefault()
        // 获取表单内容
        getUrl(id)
    })

})